<template>
    <div class="host">
        <div class="m-searchSuggestions" v-show="!isShow">
            <header class="history">
                <h3>历史记录</h3>
                <i class="icon-delete" @click="datehist"></i>
            </header>
            <van-tag @click="tagClick(historys)" v-for="(historys,index) of history" :key="index" plain type="default" size="large">
                {{historys}}
            </van-tag>
        </div>
        <div class="host-search">
            <header>
                <h3>热门搜索</h3>
            </header>
            <van-tag @click="hosClick(host)" v-for="(host,index) of hottxt" :key="index" plain type="default" size="large">{{host.keyword}}</van-tag>
        </div>
    </div>
</template>

<script>
    import { postDelete } from "../api/api"
    export default {
        name: 'YxHistoryhot',
        props: ["history","hottxt"],
        data() {
            return {
                isShow:false
            };
        },

        mounted() {

        },

        methods: {
            datehist(){
                postDelete().then((err)=>{
                    setTimeout(()=>{
                        this.$toast('删除成功');
                    this.isShow = true;
                    },2000)
                  
                }).catch((err)=>{
                    console.log(err)
                })
              
            },
            tagClick(val){
                this.$emit('tagClick',val);
            },
            hosClick(val){
                this.$emit('hosClick',val);
            }
        },
    };
</script>

<style lang="scss" scoped>
    .van-tag {
        margin-top: .3rem;
        margin-bottom: .2rem;
        margin-left: .2rem;
    }

    .m-searchSuggestions {
        padding: .2rem;
        margin-bottom: .2rem;
        background-color: #fff;
    }

    .host {
        background-color: #EEEEEE;
        color: #999;
        height: 100%;

        .history {
            display: flex;
            align-items: center;
            justify-content: space-between;


            .icon-delete {
                width: 0.54rem;
                height: 0.54rem;
                background-image: url("../assets/hxm_yanxuan-node-wap_style_img_search-25b98fb750470c28bd08c7f2e6b54927.png");
                display: inline-block;
                vertical-align: middle;
                background-size: 1.06rem .54rem;
            }
        }
    }

    .host-search {
        margin-top: .4rem;
        padding: .2rem;
        background-color: #fff;
    }

</style>
